<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>menuitem radio</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <link href="/kissy/build/css/dpl/base-debug.css" rel="stylesheet"/>
    <link href="/kissy/src/menu/assets/dpl.css" rel="stylesheet"/>
    <style>
        h1 {
            font-size: 2em;
            margin: 10px;
            text-align: center;
        }

        h2 {
            font-size: 1.5em;
            margin: 10px;
            text-align: center;
        }

        #wrap {
            width: 90%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="wrap">
    <h1 id="describe">menuitem radio</h1>

    <div id="menuitem_container" style="width:200px;position:relative;height:150px;">

    </div>
</div>
<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    (function () {
        KISSY.use("util,node,menu,separator",
                function (S, util, Node, Menu, Separator) {
                    //view
                    //render to container : button_container

                    //control
                    //view as a parameter

                    var sb = new Menu.PopupMenu({
                        // boolean，是否鼠标脱离菜单后自动隐藏
                        //autoHideOnMouseLeave:true,
                        elStyle: {
                            color: "red"
                        }
                    });

                    sb.addChild(new Menu.RadioItem({
                        content: "submenuitem1"
                    }));

                    sb.addChild(new Menu.RadioItem({
                        content: "submenuitem2"
                    }));

                    sb.addChild(new Separator());

                    if (true) {
                        var sb2 = new Menu.PopupMenu({
                            // boolean，是否鼠标脱离菜单后自动隐藏
                            //autoHideOnMouseLeave:true,
                            children: [
                                new Menu.RadioItem({
                                    content: "submenuitem141"
                                })
                            ],
                            // bug elStyle 无效
                            elStyle: {
                                color: "red"
                            }
                        });

                        sb2.addChild(new Menu.RadioItem({
                            content: "submenuitem22"
                        }));

                        var b2 = new Menu.SubMenu({
                            content: "sub-sub-menu",
                            menu: sb2
                        });

                        sb.addChild(b2);
                    }

                    var b = new Menu.SubMenu({
                        content: "submenu",
                        menu: sb
                    });

                    var menu = new Menu({
                        render: "#menuitem_container",
                        children: [b, new Menu.RadioItem({
                            content: "alone"
                        })]
                    });

                    menu.render();

                    menu.on("click", function (ev) {
                        S.log("selected : " + ev.target.get("content"));
                    });
                });
    })();
</script>
</body>
</html>